<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .txt,
      .editor {
        width: 45vw;
        height: 100vh;
        float: left;
        padding: 10px;
        border: 1px solid #ccc;
      }
      .copy-btn {
        float: left;
        width: 8vw;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="txt">
      《江城子·乙卯正月二十日夜记梦》是宋朝苏轼的诗作。 全文如下：
      十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。
      夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。
      这首词是苏轼为悼念原配妻子王弗而创作的一首悼亡词，表现了绵绵不尽的哀伤和思念。
      此词情意缠绵，字字血泪。上阕记实，下阕记梦，虚实结合，衬托出对亡妻的思念，加深全词的悲伤基调。
      全词采用白描手法，出语如话家常，却字字从肺腑镂出，自然而又深刻，平淡中寄寓着真淳，思致委婉。
    </div>
    <p class="copy-btn"><button class="btn">复制</button></p>
    <!-- contenteditable 富文本框 -->
    <div class="editor" contenteditable></div>

    <script>
      // 监听视口内的copy事件
      //   // 1.不准复制
      //   document.addEventListener("copy", (e) => {
      //     console.log("触发copy事件了~");
      //     // 1. 阻止默认行为 , 不准复制
      //     e.preventDefault();
      //     // 2. 不准复制 , 并添加自定义文字 (粘贴时显示文字)
      //     navigator.clipboard.writeText("不准复制,打钱!!");
      //   });

      //   //  2. 在复制的文字后加上一段文字
      //   const btn = document.querySelector(".btn");
      //   const txt = document.querySelector(".txt");
      //   btn.onclick = () => {
      //     navigator.clipboard.writeText(
      //       txt.innerText + `xxx公司版权所有 , 如需转载 , 请注明出处!!!!`
      //     );
      //   };

      //   // 3.刷新页面后要显示之前剪切板上的文字 (浏览器会提示是否允许剪切)
      //   navigator.clipboard.readText().then((text) => {
      //     document.querySelector(".editor").innerHTML = text;
      //   });

      // 4. 富文本 (很多浏览器默认支持直接粘贴图片)
      //  自定义事件可以实现更好的兼容
      const editor = document.querySelector(".editor");
      editor.addEventListener("paste", (e) => {
        // 拿到粘贴的文件 (粘贴的文件 : 文本的长度为0 , 图片的长度为1)
        // 判断为图片时,阻止默认行为
        if (e.clipboardData.files.length > 0) {
          e.preventDefault();
          const file = e.clipboardData.files[0];
          // 创建一个文件服务器, 读完了后出发onload事件
          const reader = new FileReader();
          reader.onload = (e) => {
            const img = document.createElement("img");
            img.src = e.target.result;
            editor.appendChild(img);
          };
          reader.readAsDataURL(file);
        }
      });
    </script>
  </body>
</html>
